<template>
  <div>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem">
      <template v-slot:customSearch>
        <span>自定义搜索插槽</span>
      </template>
      <template v-slot:customTableHeader>
        <span>自定义表单头部,需要设置operationItem的customTableHeader属性为true</span>
      </template>
    </tablePaging>
  </div>
</template>

<script setup>
import tablePaging from '@/views/common/component/table-paging'
import { onMounted, reactive, ref, } from 'vue'
import { tableItem } from './const.js'
import { Plus, Search } from "@element-plus/icons-vue";
const operationItem = reactive({
  defaultSearch: false,//默认搜索按钮
  defaultRefresh: false,//默认重置按钮
  SearchText: "查询", //搜索文字 默认搜索
  RefreshText: "重置", //刷新文字 默认重置
  customTableHeader: true,//自定义表单头部插槽
  SearchItem: [
    {
      code: "name",
      name: "姓名",
      type: 'input',
    },
    {
      // 带默认的可以不写
      code: "daterange",//
      startName: "", //默认是开始时间 type为 daterange生效
      rangeName: "", //默认是至 type为 daterange生效
      endName: "", //默认是结束时间 type为 daterange生效
      valueFormat: "", //默认是YYYY-MM-DD
      placeholder:"请选择日期",//默认是请选择日期type为date生效
      type: "daterange",//daterange或date
    },
    {
      code: "courseId",
      name: "类别名称",
      type: 'select',
      value: 'id',//value的值，默认是value
      label: 'name',//value的值，默认是label
      options: []
    },
  ],
  //   v-hasPermi="['monitor:job:export']"
  menuArray: [
    {
      show: true,
      type: 'primary',
      text: '课程添加',
      icon: Plus,
      handle: () => {
        console.log('handle')
      }
    },
  ]
})
onMounted(() => { })
</script>

<style></style>